<template>
  <view class="container">
    <!--  带搜索的标题栏  -->
    <view class="back-layout hor-layout">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <u-search margin="8px" placeholder="姓名/手机号/学号" v-model="search" :action-style="searchStyle"
                @search="refreshData" @custom="refreshData" @clear="refreshData"></u-search>
    </view>
    <view class="page-container">
      <view class="student-list" v-if="studentList.length>0">
        <view v-for="(item,index) in studentList" :key="index" class="student-item hor-layout-center"
              @click="toStudentRecord(item)">
          <!--          <image class="student-icon" src=""></image>-->
          <view class="student-item-content">
            <view class="name">{{ item.realname }}</view>
            <view class="number">联系电话：{{ item.phone }}</view>
            <view class="phone">意向课程：{{ item.courses&&item.courses.title }}</view>
          </view>
        </view>
      </view>
      <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
      <view v-else class="list-no-data">暂无数据</view>
    </view>
    <!-- 添加按钮   -->
    <view class="add-student-btn" @click="toAddIntentStudent">
      <i class="iconfont add-student-icon">&#xe601;</i>
    </view>
  </view>
</template>

<script>
import {callBackRecord, addIntentStudent} from "@/router.js"
import {IntentStudentApi} from "@/api/intentStudent.js"

let engine = new IntentStudentApi()
export default {
  name: "intentStudent",
  data() {
    return {
      search: '',
      searchStyle: {
        color: 'white',
        width: '60px',
        height: '28px',
        lineHeight: '28px',
        borderRadius: '14px',
        background: '#ff9900',
      },
      studentList: [{}],
      selectStatus: 0,
      statusList: [{label: "全部状态", value: 0}],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(options) {
    // this.refreshData()
  },
  onReachBottom(e) {
    console.log("onReachBottom", e)
    this.loadMore()
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    toStudentRecord(item) {
      this.$u.route({url: callBackRecord, params: item})
    },
    toAddIntentStudent() {
      this.$u.route({url: addIntentStudent})
    },
    getIntentStudentList() {
      let page = this.loadingObj.current, search = this.search
      engine.getIntentStudentList({page, search}).then(res => {
        this.studentList = this.studentList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.studentList = []
      this.getIntentStudentList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getIntentStudentList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.studentList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.back-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.select-layout {
  z-index: 1000;
  position: fixed;
  margin: 0px auto;
  height: 40px;
  width: 100%;
  background: white;
  border-bottom: 1px solid #E4E4E4;
}

.student-list {
}

.student-item {
  margin: 0px auto;
  margin-top: 21px;
  padding: 20px 12px;
  width: calc(100% - 24px);
  background: #FFFFFF;
  border-radius: 5px;
}

.student-icon {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  background: #b8bfc6;
  margin-right: 12px;
}

.student-item-content {

}

.student-item-content > .name {
  font-size: 16px;
  line-height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.student-item-content > .number {
  margin-top: 9px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.student-item-content > .phone {
  margin-top: 9px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.add-student-btn {
  z-index: 1200;
  position: fixed;
  bottom: 33px;
  right: 13px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #6079F5;
  border-radius: 50%;
}

.add-student-icon {
  color: white;
  font-size: 30px;
}
</style>
